<template>
  <view class="page">
    <Navbar title=" " color="#24DE73" :auto-back="false">
      <view class="navbar" slot="left">卫日亚</view>
    </Navbar>
    <view class="body-top">
      <image class="car" :src="webSrc('/profile/static/icon-car.png')" />
      <image class="station" :src="webSrc('/profile/static/station.png')" />
      <image class="line" :src="webSrc('/profile/static/green-line.png')" />
      <view v-if="isCharge" class="lightning"></view>
      <view class="power"> {{ isCharge ? "充电中" : "充电" }} </view>
      <view class="b1" :class="{ b: isCharge }"></view>
      <view class="b1 b2" :class="{ b: isCharge }"></view>
    </view>
    <view class="body-bottom">
      <Notice speed="7" :content="notice.details" @click="handleNotice" />
      <view class="body-btn f f-ac" @click="handleGas">
        <view class="btn-left">
          <image
            :src="webSrc('/profile/static/icon-gas.png')"
            style="width: 80rpx; height: 80rpx"
          />
        </view>
        <view class="btn-right f-1">会员充电</view>
      </view>
      <view class="body-btn bg-green f f-ac" @click="handleTemp">
        <view class="btn-left">
          <image
            :src="webSrc('/profile/static/icon-charge.png')"
            style="width: 80rpx; height: 90rpx"
          />
        </view>
        <view class="btn-right f-1">临时车充电</view>
      </view>
    </view>
    <Popup
      v-model="popupShow"
      :text="popupInfo.text"
      @close="closePopup"
      @confirm="confirmPopup"
    />
    <Popup-choose
      v-model="chargeShow"
      :params="chargeParams"
      @close="closePopup"
      @confirm="confirmChoose"
    />
  </view>
</template>

<script>
import { getNotice } from "@/request/common.js";
import { postStartCharge, getChargeList } from "@/request/payApi.js";
import { getUserInfo } from "@/request/bindApi.js";
export default {
  data() {
    return {
      userInfo: {}, // 用户信息
      popupShow: false, // 弹窗
      isCharge: false, // 是否充电中
      notice: {}, // 公告
      popupInfo: {
        text: "", // 弹窗内容
        type: "", // 类型
      },
      chargeShow: false, // 选择弹窗
      chargeParams: {
        type: null, // 0两孔 1十孔
        portIndex: null, // 充电口
        socketId: "", // 充电桩id
      },
    };
  },
  onShow() {
    this.getNoticeData();
    if (uni.getStorageSync("TOKEN")) {
      this.$author(() => {
        this.refreshUserInfo();
        this.getCharge();
      });
    }
  },
  // 下拉刷新
  onPullDownRefresh() {
    this.getNoticeData();
    if (uni.getStorageSync("TOKEN")) {
      this.refreshUserInfo();
      this.getCharge();
    } else {
      uni.stopPullDownRefresh();
    }
  },
  methods: {
    // 获取公告
    getNoticeData() {
      getNotice({ state: 1, pageSize: 1, pageNum: 1 }).then((res) => {
        if (res.code == 200) {
          if (res.rows.length > 0) {
            this.notice = res.rows[0];
          }
        } else {
          uni.showToast({
            title: res.msg || "服务器错误",
            icon: "none",
            mask: true,
          });
        }
      });
    },
    // 刷新用户信息
    refreshUserInfo() {
      getUserInfo()
        .then((res) => {
          if (res.code === 200) {
            uni.setStorageSync("USER_INFO", JSON.stringify(res.data));
            this.userInfo = res.data;
            if (this.userInfo.status != 1) {
              
            }
          }
        })
        .finally(() => {
          uni.stopPullDownRefresh();
        });
    },
    // 查询是否充电中
    getCharge() {
      getChargeList({ state: 2 })
        .then((res) => {
          if (res.code == 200) {
            this.isCharge = res.rows.length > 0 ? true : false;
          } else {
            uni.showToast({
              title: res.msg || "服务器错误",
              icon: "none",
              mask: true,
            });
          }
        })
        .finally(() => {
          uni.stopPullDownRefresh();
        });
    },
    // 查看公告详情
    handleNotice() {
      uni.navigateTo({
        url: `/pages/my/myNoticeDetail?data=${JSON.stringify(this.notice)}`,
      });
    },
    // 会员充电
    handleGas() {
      this.$author(() => {
        if (this.userInfo.memberType != 1) {
          this.popupInfo = {
            text: "您还不是充电会员\n请联系管理员开通会员",
            type: "member",
          };
          this.popupShow = true;
          return;
        }
        if (this.userInfo.vipType == 4) {
          this.popupInfo = {
            text: "会员已到期，请续费",
            type: "member",
          };
          this.popupShow = true;
          return;
        }
        this.scanCode();
      });
    },
    // 临时车充电
    handleTemp() {
      this.$author(() => {
        this.scanCode();
      });
    },
    // 扫码
    scanCode() {
      if (this.userInfo.status != 1) {
        this.popupInfo = {
            text: "当前账号不可用",
            type: "toast",
          };
          this.popupShow = true;
          return;
      }
      uni.scanCode({
        onlyFromCamera: false, // 是否只能从相机扫码
        scanType: ["qrCode"],
        success: (code) => {
          let text = code.result;
          let http = ["iot.rebuildware.com", "wx.tom-da.com"];
          if (http.every((item) => text.indexOf(item) == -1)) {
            this.popupInfo = {
              text: "请扫描正确的二维码",
              type: "toast",
            };
            this.popupShow = true;
            return;
          }
          if (text.indexOf("iot.rebuildware.com") != -1) {
            this.chargeParams.socketId = text.split("/p/")[1];
            this.chargeParams.type = 0;
          }
          if (text.indexOf("wx.tom-da.com") != -1) {
            this.chargeParams.socketId = text.split("/start/")[1];
            this.chargeParams.type = 1;
          }
          this.chargeShow = true;
        },
        fail: (e) => {
          if (e.errMsg.includes("cancel")) return;
          this.popupInfo = {
            text: "未识别到二维码",
            type: "toast",
          };
          this.popupShow = true;
        },
      });
    },
    // 关闭弹窗
    closePopup() {
      this.popupShow = false;
      this.chargeShow = false;
    },
    // 确认选择
    confirmChoose(val) {
      uni.showLoading({
        title: "请稍候...",
        mask: true,
      });
      postStartCharge(val)
        .then((res) => {
          if (res.code == 200) {
            this.chargeShow = false;
            this.popupInfo = {
              text: "“电源已接通”",
              type: "toast",
            };
            this.popupShow = true;
          } else if (res.code == 500) {
            this.chargeShow = false;
            this.popupInfo = {
              text: res.msg || "服务器错误",
              type: "toast",
            };
            this.popupShow = true;
          } else {
            this.chargeShow = false;
            this.popupInfo = {
              text: res.msg || "服务器错误",
              type: "recharge",
            };
            this.popupShow = true;
          }
        })
        .finally(() => {
          uni.hideLoading();
        });
    },
    // 确认弹窗
    confirmPopup() {
      if (this.popupInfo.type == "member") {
        if (this.userInfo.memberType == 1) {
          uni.navigateTo({ url: "/pages/pay/memberCashier" });
        }
      } else if (this.popupInfo.type == "recharge") {
        uni.navigateTo({ url: "/pages/pay/cashier" });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: radial-gradient(48.31% 108.99% at 100% 1.17%, #142527 0%, #15161c 100%);
  .navbar {
    color: #24de73;
    font-family: "FZZongYi-M05S";
    font-size: 32rpx;
    letter-spacing: 4rpx;
  }
  .body-top {
    position: fixed;
    bottom: 53%;
    height: 400rpx;
    width: 100%;
    .power {
      position: absolute;
      width: 100%;
      bottom: -14rpx;
      font-size: 36rpx;
      color: #25ca6a;
      text-align: center;
    }
    .car {
      position: absolute;
      top: -50rpx;
      left: calc(50% - 290rpx);
      width: 500rpx;
      height: 332rpx;
      z-index: 9;
    }
    .station {
      position: absolute;
      right: 126rpx;
      top: -20rpx;
      width: 212rpx;
      height: 276rpx;
    }
    .line {
      position: absolute;
      bottom: 0;
      left: 5%;
      right: 5%;
      width: 90%;
      height: 62rpx;
    }
    .lightning {
      position: absolute;
      right: 210rpx;
      top: 120rpx;
      width: 45rpx;
      height: 54rpx;
      background-color: #2e9e2e;
      animation: dodge 3s infinite;
      opacity: 0;
    }
    @keyframes dodge {
      0%,
      100% {
        opacity: 1;
      }
      50% {
        opacity: 0;
      }
    }
    .b {
      animation: open 3s infinite;
    }
    .b1 {
      position: absolute;
      border-radius: 50%;
      transform: rotateX(75deg);
    }
    .b2 {
      animation-delay: 1s;
    }
  }
  @keyframes open {
    0% {
      width: 50rpx;
      height: 50rpx;
      left: calc(50% - 50rpx);
      top: 250rpx;
      opacity: 0.2;
      border-bottom: 2rpx solid #24de73;
    }
    50% {
      opacity: 1;
    }
    100% {
      width: 500rpx;
      height: 500rpx;
      left: calc(50% - 275rpx);
      top: 30rpx;
      opacity: 0;
      border-bottom: 20rpx solid rgba(36, 222, 114, 0.5);
    }
  }
  .body-bottom {
    width: 100%;
    height: 50%;
    padding: 60rpx 40rpx;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 8;
    box-sizing: border-box;
    background-color: #21212a;
    border-radius: 40rpx 40rpx 0 0;
    overflow-y: auto;
    position: fixed;
    .body-btn {
      width: 100%;
      height: 180rpx;
      margin-top: 40rpx;
      border: 1rpx solid #24de73;
      border-radius: 30rpx;
      font-family: "FZZongYi-M05S";
      &:active {
        background-color: #25ca6a;
      }
      .btn-left {
        width: 160rpx;
        padding: 40rpx;
        box-sizing: border-box;
      }
      .btn-right {
        color: #fff;
        font-size: 68rpx;
        letter-spacing: 8rpx;
      }
    }
  }
}
</style>
